<template>
  <div class="login-container">
    <div class="form">
      <div class="pic">
        <img
          src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
          alt=""
        />
      </div>
      <el-card shadow="never" class="login-card">
        <!--登录表单-->
        <el-form
          :model="loginForm"
          status-icon
          :rules="loginRules"
          ref="loginForm"
        >
          <el-form-item prop="loginName">
            <div class="upyc">
              <span><i class="el-icon-lock" /></span>
              <el-input
                placeholder="请输入账号"
                v-model="loginForm.loginName"
                autocomplete="off"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="upyc">
              <span><i class="el-icon-mobile" /></span>
              <el-input
                placeholder="请输入密码"
                type="password"
                show-password
                v-model="loginForm.password"
                autocomplete="off"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="code">
            <div class="upyc">
              <span><i class="el-icon-message" /></span>
              <el-input
                placeholder="请输入验证码"
                v-model="loginForm.code"
                autocomplete="off"
              ></el-input>
              <div class="code" @click="getNewCode">
                <img :src="codeImg" alt="" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import nanoid from "@/utils/getRandom";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        loginName: "admin",
        password: "admin",
        code: "",
        loginType: 0,
      },
      clientToken: "",
      codeImg: "",
      codeTrue: "",
      loginRules: {
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "请输入5-16位数字",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 16, message: "请输入5-16位数字", trigger: "blur" },
        ],
        code: [
          //1、校验规则 2、校验的值 3、回调函数（直接调用，表示通过校验）
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            pattern: /^\w{4}$/,
            message: "验证码输入有误",
            trigger: "blur",
          },
        ],
      },
    };
  },
  async created() {
    this.clientToken = nanoid();
    this.getImg();
  },
  methods: {
    async submitForm() {
      await this.$refs.loginForm.validate();
      await this.$store.dispatch("user/login", {
        loginName: this.loginForm.loginName,
        password: this.loginForm.password,
        code: this.loginForm.code,
        clientToken: this.clientToken,
        loginType: 0,
      });
      this.$router.push("/");
    },
    getNewCode() {
      this.clientToken = nanoid();
      this.getImg();
    },
    async getImg() {
      this.codeImg = `https://likede2-java.itheima.net/api/user-service/user/imageCode/${this.clientToken}`;
    },
  },
};
</script>
<style lang="scss">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: rgba(38, 72, 176)
    url(http://likede2-admin.itheima.net/img/background.be4fae7d.png) no-repeat
    center / cover;
  .form {
    width: 480px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    .pic {
      position: relative;
      width: 96px;
      height: 96px;
      img {
        position: absolute;
        width: 96px;
        height: 96px;
        top: -46px;
        left: 50%;
        margin-left: -48px;
      }
    }
    .el-card {
      margin-top: -46px;
      border: none;
      padding: 0;
    }
    .upyc {
      position: relative;
      display: flex;
      padding: 0 10px;
      overflow: hidden;
      border: 1px solid #ccc;
    }
    span {
      width: 16px;
      height: 16px;
    }
    .el-input {
      width: 350px;
      height: 44px;
      .el-input__inner {
        background: #fff;
        border: 1px solid transparent;
      }
    }
    .el-checkbox {
      color: #606266;
    }
    .code {
      position: absolute;
      right: 0;
      top: -5px;
      width: 130px;
      height: 50px;
      background-color: #ccc;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .el-button {
      width: 388px;
      border-radius: 8px;
      background-image: linear-gradient(to right, #7483f0, #4362e4);
    }
  }
}
</style>
